import React, { useRef,useEffect } from 'react'
import { Tabs, Badge,NavBar, Space, Toast,List,Input,Button } from 'antd-mobile'

const back = () =>{
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })
}
const View = () => {
    
    return <>
        <NavBar onBack={back}>登录/注册</NavBar>
        <Tabs>
          <Tabs.Tab title='登录' key='login'>
            <div className="login">
                <div className="items">
                  <Input className="inputs" placeholder='请输入您的邮箱' clearable />
                </div>
                <div className="items">
                  <Input className="inputs" placeholder='请输入密码' clearable />
                </div>
            </div>
            <Button block shape='rounded' color='primary'>登录</Button>
          </Tabs.Tab>
          <Tabs.Tab title='注册' key='register'>
            <div className="login">
                <div className="items">
                  <Input className="inputs" placeholder='请输入您的邮箱' clearable />
                </div>
                <div className="items">
                  <List style={{
                      '--prefix-width': '6em',
                    }} >
                    <List.Item prefix='邮箱验证码' extra={<a>发送验证码</a>}>
                      <Input placeholder='请输入验证码' clearable />
                    </List.Item>
                  </List>
                </div>
                <div className="items">
                  <Input className="inputs" placeholder='请输入密码' clearable />
                </div>
            </div>
            <Button block shape='rounded' color='primary'>注册</Button>
          </Tabs.Tab>
        </Tabs>
    </>
}
export default View;